<script setup>
import * as echarts from "echarts";
import {onMounted, ref, watch} from "vue";

const biology = ref()
const props = defineProps({
  before_year_data: {
    type: Array,
    default: () => []
  },
  last_year_data: {
    type: Array,
    default: () => []
  },
})

const option = ref({
  title: {
    text: '全球海洋生物量',
    textStyle: {
      fontSize: 14
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '1%',/*3*/
    right: '9.5%',/*原8*/
    bottom: '8%',/*3*/
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },

  yAxis: {
    type: 'category',
    //国家
    data: []
  },
  series: [
      //22年数据
    {
      name: '2022',
      type: 'bar',
      data: []
    },
    //23年数据
    {
      name: '2023',
      type: 'bar',
      data: []
    }
  ]
})

onMounted(() => {
  //定位
  // console.log(locations.value)
  let myChart = echarts.init(biology.value, 'dark', {
    renderer: 'canvas',
    useDirtyRect: false
  });
  let app = {};
  myChart.setOption(option.value);
  window.addEventListener('resize', myChart.resize);

  //更新数据
  const locations_before = ref([])
  const num_before=ref([])
  const num_last=ref([])
  watch(props, () => {
    for (const location of props.before_year_data) {
      locations_before.value.push(location.location)
      num_before.value.push(location.num)
    }
    for (const location of props.last_year_data) {
      num_last.value.push(location.num)
    }
    //更新y轴
    option.value.yAxis.data=locations_before.value
    //更新x轴
    option.value.series[0].data=num_before.value
    option.value.series[1].data=num_last.value
    // console.log(option.value.series)
    myChart.setOption(option.value);
  })
})

</script>

<template>
  <div class="content-left1" ref="biology">

  </div>

</template>

<style scoped>
.content-left1 {
  /*height:600px;*/
  //border:1px solid white;
  background-color: #f1f1f3;
  flex-grow: 1;
}

</style>
<!--2024/2/2 13:11-->